<template>
  <div class="notice-editor-wrapper">
    <div class="ql-editor-content">
      <div class="notice-info">
        <div class="notice-title" style="display:flex;justify-content:space-betwwen">
          <span>新闻标题</span>
        </div>
        <a-input v-model="title" style="width: 70%;" placeholder="请输入标题" v-html="title" />
      </div>
      <div class="notice-info" style="margin-top:20px;">
        <div class="notice-title" style="display:flex;justify-content:space-betwwen; ">
          <span>选择发布时间</span>
        </div>
        <a-date-picker
          v-model="dataTime"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
          style="margin-top:10px;margin-bottom:10px"
          @change="handleChange"
        />
      </div>
      <div>
        <div class="notice-title">附件上传</div>
        <div>
          <UploadGeneralFileWithName :default-value="fileList" :limit="100" @change="onFileChange" />
        </div>
      </div>

      <div id="editor-main" class="editor-main">
        <div class="notice-title">新闻内容</div>
        <vue-wangeditor ref="editor" v-model="contentHasStyle" :menus="menus" :height="editorHeight" @change="changeContent" />
      </div>
    </div>
    <div class="btnline">
      <a-button type="primary" @click="NextStep">下一步</a-button>
    </div>
  </div>
</template>
<script>
import { formatDateAll } from "@/utils/index";
import vueWangeditor from "./vueWangeditor";
import { UploadGeneralFileWithName } from "xqjr-plugin-common";
import moment from "moment";
export default {
  name: "Edit",
  components: {
    vueWangeditor,
    UploadGeneralFileWithName
  },
  props: {
    noticeTitleInit: {
      type: String,
      default: ""
    },
    noticeTimeInit: {
      type: Number,
      default: 0
    },
    noticeFileListInit: {
      type: Array,
      default: () => []
    },
    noticeContentInit: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      template: null,
      title: "",
      fileList: [],
      menus: [
        "bold", // 粗体
        "underline", // 下划线
        "italic", // 斜体
        "strikeThrough", // 中线
        "eraser", // 清空格式
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "quote", // 引用
        "fontSize", // 字号
        "fontName", // 字体
        "head", // 标题
        "list", // 无序列表
        "justify", // 有序列表
        "undo", // 撤销
        "redo", // 重做
        "fullscreen",
        "link",
        "image" // 插入图片
      ],
      initContent: "",
      content: "",
      contentHasStyle: "",
      options: {},
      cursorPosition: null,
      variables: [],
      variableList: [],
      isNext: false,
      editorHeight: 0,
      moment,
      dataTime: moment()
    };
  },

  watch: {
    noticeTitleInit(val) {
      this.noticeTitleInit = val;
      this.title = val;
    },
    noticeTimeInit(val) {
      if (val) {
        this.dataTime = moment(val);
      }
    },
    noticeFileListInit(val) {
      this.fileList = val;
    },
    noticeContentInit(val) {
      this.noticeContentInit = val;
      this.contentHasStyle = val;
      this.$refs.editor.setHtml(val);
      this.content = this.$refs.editor.getText();
      this.contentHasStyle = this.$refs.editor.getHtml();
    },
    dataTime(val) {}
  },
  mounted() {
    // if (document.getElementById("editor-main")) {
    //   this.editorHeight = 500;
    // }
  },
  methods: {
    // 选择发布时间
    handleChange(e) {
      this.dataTime = e;
    },
    onFileChange(list) {
      this.fileList = list;
    },
    initEditContent() {
      // 编辑器赋值
      this.$refs.editor.setHtml(this.noticeContentInit);
      this.title = this.noticeTitleInit;
      this.content = this.$refs.editor.getText();
      this.contentHasStyle = this.$refs.editor.getHtml();
    },
    NextStep() {
      var aData = new Date().getTime();
      const dataTime1 = this.dataTime ? this.dataTime.format("YYYY-MM-DD HH:ss:mm") : formatDateAll(aData);
      // this.dataTime = formatDateAll(this.dataTime);
      // this.noticeTime = formatDateAll(aData);

      if (this.title === "" || this.content === "") {
        this.$message.warning("请填写新闻标题及公告内容");
      } else {
        this.$emit("current", 2);
        this.$emit("update:noticeTitle", this.title);
        this.$emit("update:noticeFileList", this.fileList);
        this.$emit("update:noticeContent", this.content);
        this.$emit("update:noticeContentHasStyle", this.contentHasStyle);
        this.$emit("update:noticeTime", dataTime1);
        // if (dataTime1) {
        //   this.$emit("update:noticeTime", dataTime1);
        // } else {
        //   this.$emit("update:noticeTime", this.noticeTime);
        // }
      }
    },
    changeContent(text) {
      this.content = this.$refs.editor.getText();
      this.contentHasStyle = this.$refs.editor.getHtml();
    }
  }
};
</script>
<style lang="scss">
.btnline {
  width: 100%;
  height: 60px;
  margin-top: 24px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  button {
    margin: 0 10px;
  }
}
.ant-calendar-picker-container {
  z-index: 100000;
}
</style>
